<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_指令_自定义指令</title>
</head>
<body>
<div id="test2">
    <p v-upper-text="msg"></p>
    <p v-lower-text="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    Vue.directive('upper-text', function (el, binding) {
        console.log(el, binding)
        el.textContent = binding.value.toUpperCase()
    })

    new Vue({
        el: '#test2',
        data: {
            msg: "I Like You Too"
        },
        directives: {
            'lower-text'(el, binding) {
                console.log(el, binding)
                el.textContent = binding.value.toLowerCase()
            }
        }
    })
</script>

</body>
</html>